<template>
  <view class="my-container">
    <!-- 已登录界面 -->
    <view class="login">
      <!-- 头像 姓名 -->
      <view class="person-info" v-if="token">
        <view class="icon-avatar" @click="gotoInfo">
          <image class="icon-circle" :src="userInfo.avatar"></image>
        </view>
        <view class="info">
          <text class="name">姓名：{{ name }}</text>
          <text class="stuId">学号：{{ stuId }}</text>
        </view>
      </view>
      <!-- 未登录界面 -->
      <view class="no-login" v-else @click="goToLogin">
        <view class="icon-avatar">
          <image class="icon-circle" src="@/static/my/default.png"></image>
        </view>
        <view class="info">
          <text class="name" style="color: #000; font-weight: 400; font-size: 32rpx">点击登录 ></text>
          <text class="stuId">登录后可使用完整的功能</text>
        </view>
      </view>

      <!-- 预约情况：全部预约信息， 已预约， 历史记录-->
      <view class="row_list_info">
        <view class="item" @click="goToCreditsInfo">
          <view class="top-info">
            <image src="@/static/iconfont/kaquan.png" mode=""></image>
          </view>
          <view class="bottom_info">个人积分</view>
        </view>
        <view class="item" @click="goToCreditsExchange">
          <view class="top-info">
            <image src="@/static/iconfont/liwu.png" mode=""></image>
          </view>
          <view class="bottom_info">积分兑换</view>
        </view>
        <view class="item" @click="goToRecord">
          <view class="top-info">
            <image src="@/static/iconfont/zixun.png" mode=""></image>
          </view>
          <view class="bottom_info">预约记录</view>
        </view>
      </view>
      <!-- 其他列表 -->
      <view class="column_link_list" v-if="token">
        <view class="list_item" @click="gotoInfo">
          <uni-icons class="icon" type="gear" size="20"></uni-icons>
          <text class="title">个人信息</text>
          <uni-icons class="arrow" type="right"></uni-icons>
        </view>
        <view class="list_item" @click="gotoChangePassword">
          <uni-icons class="icon" type="locked" size="20"></uni-icons>
          <text class="title">修改密码</text>
          <uni-icons class="arrow" type="right"></uni-icons>
        </view>
        <view class="list_item">
          <uni-icons class="icon" type="info" size="20"></uni-icons>
          <text class="title">常见问题</text>
          <uni-icons class="arrow" type="right"></uni-icons>
        </view>
        <view class="list_item" @click="dialogToggle()">
          <uni-icons class="icon" type="close" size="20"></uni-icons>
          <text class="title">清除绑定</text>
          <uni-icons class="arrow" type="right"></uni-icons>
        </view>
      </view>
      <!-- 退出登录按钮 -->
      <view class="btn">
        <button class="log-out" @click="Logout(1)">{{ token ? '退出登录' : '请先进行登录' }}</button>
        <button class="log-out" @click="Logout(0)" v-if="!token" style="margin-top: 20rpx;">注册</button>
      </view>
    </view>

    <!-- 提示信息弹窗 -->
    <uni-popup ref="message" type="message">
      <uni-popup-message :type="msgType" :message="tips" :duration="2000"></uni-popup-message>
    </uni-popup>
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog cancelText="再考虑考虑" confirmText="确认解除绑定" title="温馨提示" content="你确定要解除账号绑定嘛？一旦接触绑定后,无法再注册!"
        @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
      // 弹窗信息和类型
      msgType: '',
      tips: '',
    }
  },

  onLoad () {
    uni.$on('param', (param) => {
      if (param.data === 1) {
        return this.messageToggle('success', '修改个人信息成功！')
      } else if (param.data === 2) {
        return this.messageToggle('success', '修改密码成功！')
      } else if (param.data === 3) {
        return this.messageToggle('success', '登录成功！')
      } else if (param.data === 4) {
        return this.messageToggle('success', '注册成功！请查看学号!')
      }
    })
    this.getUserInfo(1)
  },
  onUnload () {
    uni.$off('param')
  },
  methods: {
    ...mapMutations('user', ['removeToken']),
    ...mapActions('user', ['getUserInfo']),
    // 预约记录
    goToRecord () {
      if (!this.isToken()) {
        return
      }
      uni.navigateTo({
        url: '/subpackage/userInfo/reservationRecord',
      })
    },
    //个人信息
    gotoInfo () {
      uni.navigateTo({
        url: '/subpackage/userInfo/userInfo',
      })
    },
    // 修改密码
    gotoChangePassword () {
      uni.navigateTo({
        url: '/subpackage/userInfo/ChangePassword',
      })
    },
    // 登录界面
    goToLogin (isLogin) {
      uni.navigateTo({
        url: `/subpackage/login/login?isLogin=${isLogin}`
      })
    },
    // 个人积分
    goToCreditsInfo () {
      if (!this.isToken()) {
        return
      }
      uni.navigateTo({
        url: '/subpackage/credits/creditsInfo',
      })
    },
    // 积分兑换
    goToCreditsExchange () {
      if (!this.isToken()) {
        return
      }
      uni.navigateTo({
        url: '/subpackage/credits/exchange',
      })
    },
    // 退出登录
    Logout (isLogin) {
      if (!this.token) {
        this.goToLogin(isLogin)
        return
      }
      this.removeToken()
      return this.messageToggle('warn', '已退出登录！')
    },
    // 封装提示框
    messageToggle (type, tips) {
      this.msgType = type
      this.tips = tips
      this.$refs.message.open()
    },
    dialogConfirm () {
      this.removeToken()
      this.messageToggle('warn', '已经确认清除绑定，等待管理员确认！')
    },
    dialogClose () {
      this.$refs.alertDialog.close()
    },
    dialogToggle () {
      this.msgType = 'error'
      this.$refs.alertDialog.open()
    },
    // 判断token是否存在
    isToken () {
      if (!this.token) {
        return this.messageToggle('error', '请先进行登录！再进行其他操作！')
      }
      return true
    },
  },
  computed: {
    ...mapState('user', ['token', 'userInfo']),
    name () {
      return this.userInfo?.name ? this.userInfo.name : 'name为空'
    },
    stuId () {
      return this.userInfo?.stuId ? this.userInfo.stuId : 'id为空'
    }


  },
}
</script>

<style lang="scss">
.my-container {
  box-sizing: border-box;
  height: 100vh;

  //已经登录
  .login {

    // 头像信息等
    .person-info,
    .no-login {
      background: linear-gradient(to right, #45a7fe, #55d4ff);
      width: 100%;
      height: 200rpx;
      display: flex;
      justify-content: space-between;
      padding: 100rpx 20rpx;
      position: relative;
      z-index: 1;

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 60rpx;
        background: linear-gradient(to top, #f5f5f5 5%, transparent 95%);
        z-index: 2;
      }

      .icon-avatar {
        $iconSize: 130rpx;
        width: $iconSize;
        height: $iconSize;
        background-color: #fff;
        border-radius: 100rpx;
        position: relative;
        margin-left: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon-circle {
          width: 100%;
          height: 100%;
          clip-path: circle(61rpx at 66rpx 66rpx);
        }
      }

      .info {
        margin-left: 20rpx;
        height: 120rpx;
        line-height: 120rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        color: #fff;
        $fontSize: 28rpx;

        .name {
          height: 75rpx;
          line-height: 75rpx;
          font-size: $fontSize;
          font-weight: 700;
        }

        .stuId {
          font-size: $fontSize - 4rpx;
          line-height: 30rpx;
        }
      }
    }

    // 横向列表
    .row_list_info {
      box-sizing: border-box;
      position: relative;
      background-color: #fff;
      display: flex;
      margin: 0 auto;
      margin-top: -130rpx;
      width: 90%;
      height: 200rpx;
      border-radius: 20rpx;
      z-index: 3;

      .item {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;

        .top-info {
          $size: 80rpx;
          font-size: 32rpx;
          height: $size;
          width: $size;
          line-height: 60rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }

        .bottom_info {
          margin-top: 10rpx;
          font-size: 26rpx;
          color: dimgray;
        }

        &:not(:last-of-type)::before {
          content: '';
          position: absolute;
          top: calc(100%-50%);
          right: 1rpx;
          height: 50%;
          border-right: 1rpx solid lightgray;
        }
      }
    }

    // 纵向列表
    .column_link_list {
      width: 90%;
      margin: 0 auto;
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .list_item {
        padding: 0 20rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
        position: relative;

        .icon {
          margin-left: 10rpx;
        }

        .title {
          flex: 1;
          margin-left: 10rpx;
          color: dimgray;
        }

        .arrow {}

        &:not(:last-of-type)::before {
          content: '';
          position: absolute;
          bottom: 1rpx;
          left: 0;
          width: 100%;
          border-bottom: 1px solid lightgray;
        }
      }
    }

    // 退出登录按钮
    .btn {
      width: 90%;
      margin: 0 auto;
      margin-top: 40rpx;

      .log-out {
        align-items: center;
        background-color: skyblue;
        color: #fff;
        font-size: 32rpx;
      }
    }

    // height: 100vh;
    // margin: 0 auto;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    // gap: 30rpx;
    .tips {
      font-size: 44rpx;
      letter-spacing: 10rpx;
      font-weight: 700;
      color: #eeeeee;
      text-shadow: #000 0rpx 0 10rpx;
    }

    .btn-login {
      width: 80%;
      align-items: center;
      background-color: skyblue;
      color: #fff;
      font-size: 32rpx;
      box-shadow: 6rpx 6rpx 10rpx -2rpx #000;
    }
  }
}
</style>
